<template>
  <div class="source-box">
    <van-tabs
      v-model="activeTab"
      @change="changeTab"
      :line-height="3"
      :line-width="16"
      color="#007AE6"
    >
      <van-tab title="海报">
        <div class="content">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="finishedText"
            @load="onLoad"
          >
            <div class="poster-box">
              <div
                class="poster-item"
                v-for="(item,index) in posterArr"
                :key="index"
                @click="goPoster(item, index)"
              >
                <div class="pic">
                  <img :src="item.content" alt="">
                </div>
                <div class="title">{{item.title}}</div>
                <div class="time">{{item.updateTime}}上传</div>
              </div>
            </div>
          </van-list>
          <div class="nodata" v-if="!posterArr.length && nodataStatus">
            <img src="../../assets/img/source/nodata.png" alt="">
            <p>暂无海报素材</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="资讯">
        <div class="content">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="finishedText"
            @load="onLoad"
          >
            <div class="article-box">
              <div
                class="article-item"
                v-for="(item,index) in articleArr"
                :key="index"
                :class="[isAndroid ? 'line' : 'scale-1px-bottom']"
                @click="goArticle(item)"
              >
                <div class="article-info">
                  <div class="title">{{item.title}}</div>
                  <div class="time">时间：{{item.updateTime}}</div>
                </div>
                <div class="article-pic">
                  <img :src="item.coverImgUrl" alt="">
                </div>
              </div>
            </div>
          </van-list>
          <div class="nodata" v-if="!articleArr.length && nodataStatus">
            <img src="../../assets/img/source/nodata.png" alt="">
            <p>暂无图文素材</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="视频">
        <div class="content">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="finishedText"
            @load="onLoad"
          >
            <div class="video-box">
              <div
                class="video-item"
                v-for="(item,index) in videoArr"
                :key="index"
                @click="goVideo(item)"
              >
                <div class="pic" :style="{'backgroundImage':'url('+item.coverImgUrl+')'}">
                  <div class="pilay-icon">
                    <img src="../../assets/img/source/play.png" alt="">
                  </div>
                  <div class="long">{{JSON.parse(item.content)['duration'] | formatDuration}}</div>
                </div>
                <div class="info">
                  <div class="title">{{item.title}}</div>
                  <div class="time">时间：{{item.updateTime}}</div>
                </div>
              </div>
            </div>
          </van-list>
          <div class="nodata" v-if="!videoArr.length && nodataStatus">
            <img src="../../assets/img/source/novideo.png" alt="">
            <p>暂无视频素材</p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import sourceService from 'SERVICE/sourceService'
import CompileCover from 'COMP/Market/MarketDetail/MarketShare/CompilePoster/CompileCover'
export default {
  data() {
    return {
      linkerId: '',
      activeTab: 0,
      current: 1,
      pageSize: 10,
      pages: 1,
      loading: false,
      finished: false,
      posterArr: [],
      articleArr: [],
      videoArr: [],
      isAndroid: false,
      nodataStatus: false,
      finishedText: '没有更多了'
    }
  },
  created() {
    let u = navigator.userAgent
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android终端
    this.isAndroid = isAndroid
    this.linkerId = this.$route.query.linkerId
    if (window.sessionStorage.getItem('activeTab')) {
      this.activeTab = window.sessionStorage.getItem('activeTab')
      window.sessionStorage.removeItem('activeTab')
    }
  },
  methods: {
    // tab切换
    changeTab() {
      this.current = 1
      this.pages = 1
      this.nodataStatus = false
      this.finished = false
    },
    // 加载数据
    onLoad() {
      if (this.current > this.pages) {
        // 加载状态结束
        this.finished = true
        this.loading = false
      } else {
        this.getAppliedMaterialList()
      }
    },
    // 获取海报\图文\视频
    getAppliedMaterialList() {
      let type = this.activeTab === 0 ? 2 : this.activeTab === 1 ? 0 : 1
      sourceService
        .getAppliedMaterialList({
          linkerId: this.linkerId,
          type: type,
          current: this.current,
          size: this.pageSize
        })
        .then(res => {
          let classify = {
            0: 'posterArr', // 海报
            1: 'articleArr', // 图文
            2: 'videoArr' // 视频
          }
          if (res) {
            this.pages = res.pages
            if (this.current === 1) {
              this[classify[this.activeTab]] = res.records
            } else {
              this[classify[this.activeTab]].push(...res.records)
            }
            this.current += 1
          } else {
            // 加载状态结束
            this.finished = true
          }
          this.loading = false
          this.nodataStatus = true
          if (!this[classify[this.activeTab]].length) {
            this.finishedText = ''
          } else {
            this.finishedText = '没有更多了'
          }
        })
        .catch(err => {
          // 加载状态结束
          this.finished = true
          this.loading = false
        })
    },
    // 增加应用素材浏览次数 0-图文 1-视频 2-海报
    addViewNum(item, type) {
      sourceService
        .addViewNum({
          linkerId: this.linkerId,
          materialId: item.materialId,
          type: type,
          userType: 1
        })
        .then(res => {})
        .catch(err => {})
    },
    // 跳转海报详情 0-图文 1-视频 2-海报
    goPoster(item, index) {
      window.sessionStorage.setItem('activeTab', 0)
      this.addViewNum(item, 2)
      // this.$router.push({ path: '/source/poster', query: { linkerId: this.linkerId, current: index } })
      this.$router.push({ path: '/source/poster/share', query: { url: item.content, linkerId: this.linkerId } })
    },
    // 跳转图文详情
    goArticle(item) {
      window.sessionStorage.setItem('activeTab', 1)
      this.addViewNum(item, 0)
      this.$router.push({ path: '/source/article', name: 'source-article', params: { content: item } })
    },
    // 跳转视频详情
    goVideo(item) {
      window.sessionStorage.setItem('activeTab', 2)
      this.addViewNum(item, 1)
      this.$router.push({ path: '/source/video', name: 'source-video', params: { content: item } })
    }
  },
  filters: {
    formatTime(val) {
      let time = ''
      if (val) {
        time = val.split(' ')[0].replace(/-/g, '/')
      }
      return time
    },
    formatHtml(val) {
      let content = ''
      if (val) {
        content = val.replace(/<[^<>]+>/g, '')
      }
      return content
    },
    formatDuration(val) {
      let time = ''
      if (val) {
        let theTime = parseInt(val)
        let middle = 0
        let hour = 0
        if (theTime > 60) {
          middle = parseInt(theTime / 60)
          theTime = parseInt(theTime % 60)
          if (middle > 60) {
            hour = parseInt(middle / 60)
            middle = parseInt(middle % 60)
          }
        }
        time = theTime < 10 ? `0${theTime}` : theTime
        if (middle > 0) {
          time = `${middle} : ${time}`
        }
        if (hour > 0) {
          time = `${hour} : ${time}`
        }
      }
      return time < 60 ? `0 : ${time}` : time
    }
  }
}
</script>

<style lang="less" scoped>
.source-box {
  height: 100%;
  /deep/ .van-tabs {
    .van-tab--active {
      color: #007ae6;
    }
  }
  /deep/ .van-tabs__wrap {
    display: none;
  }
  /deep/ .van-tabs--line {
    padding-top: 0;
  }
  .poster-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #4b5066;
    padding: 16px;
    .poster-item {
      font-size: 14px;
      width: 164px;
      margin-bottom: 16px;
      background-color: #fff;
      // border-radius: 4px;
      overflow: hidden;
      .pic {
        width: 164px;
        height: 228px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .title {
        font-size: 14px;
        width: 100%;
        max-height: 42px;
        line-height: 21px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; // 控制多行的行数
        -webkit-box-orient: vertical;
        margin-top: 8px;
        color: #0d1b33;
        padding: 0 0 8px 8px;
      }
      .time {
        font-size: 10px;
        color: #919599;
        margin-top: 2px;
        line-height: 15px;
        padding: 0 0 12px 8px;
      }
    }
  }
  .article-box {
    font-size: 16px;
    color: #333;
    .article-item {
      display: flex;
      padding: 16px 0;
      margin: 0 16px;
      .article-info {
        flex: 1;
        width: 0;
        overflow: hidden;
        .title {
          font-size: 16px;
          height: 48px;
          font-weight: 400;
          color: #0d1b33;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; // 控制多行的行数
          -webkit-box-orient: vertical;
        }
        .time {
          margin-top: 30px;
          font-size: 12px;
          color: #969ea8;
        }
      }
      .article-pic {
        width: 120px;
        height: 90px;
        border-radius: 6px;
        overflow: hidden;
        margin-left: 16px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  .video-box {
    padding: 16px;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .video-item {
      margin-bottom: 16px;
      .pic {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-clip: content-box;
        width: 164px;
        height: 96px;
        border-radius: 6px;
        position: relative;
        .pilay-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          img {
            width: 40px;
            height: 40px;
          }
        }
        .long {
          position: absolute;
          right: 8px;
          bottom: 8px;
          color: #fff;
        }
      }
      .info {
        .title {
          font-size: 14px;
          font-weight: 400;
          color: rgba(13, 27, 51, 1);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 8px 0;
        }
        .time {
          font-size: 12px;
          font-weight: 400;
          color: rgba(156, 165, 181, 1);
        }
      }
    }
  }
  .nodata {
    width: 100%;
    margin-top: 138px;
    text-align: center;
    color: #999;
    font-size: 12px;
    img {
      width: 88px;
      height: 88px;
    }
  }
}
</style>
